<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        // 获取四个多选框items
        var items = document.getElementsByName("items");
        // 获取全选/全不选的多选框
        var checkedAllBox = document.getElementById("checkedAllBox");
        /**
         * 全选按钮
         *    -点击按钮以后，四个多选框全都被选中
         */

        //  1.#checkedAllBtn

        var checkedAllBtn = document.getElementById("checkedAllBtn");
        checkedAllBtn.onclick = function () {
          // 获取四个多选框items
          var items = document.getElementsByName("items");

          // 遍历items
          for (var i = 0; i < items.length; i++) {
            //   通过多选框的checked属性可以来获取或设置多选框的选中状态
            // alert(items[i].checked)

            // 设置四个多选框变成选中状态
            items[i].checked = true;
          }

          // 将全选/全不选变成选中状态
          checkedAllBox.checked = true;
        };
        // 2.#checkedNoBtn
        var checkedNoBtn = document.getElementById("checkedNoBtn");
        checkedNoBtn.onclick = function () {
          // 遍历items
          for (var i = 0; i < items.length; i++) {
            items[i].checked = false;
          }
          checkedAllBox.checked = false;
        };

        /**
         * 反选
         * 点击按钮以后，选中的变没选，没选的变选中
         */
        // 3.#checkedRevBtn
        var checkedRevBtn = document.getElementById("checkedRevBtn");
        checkedRevBtn.onclick = function () {
          // 遍历items
          for (var i = 0; i < items.length; i++) {
            // if (items[i].checked) {
            //   // 证明多选框已选中，则设置为没选中状态
            //   items[i].checked = false;
            // } else {
            //   items[i].checked = true;
            // }
            items[i].checked = !items[i].checked;
          }
          checkedAllBox.checked = true;

          for (var j = 0; j < items.length; j++) {
            // 判断四个多选框是否全选
            // 只要有一个没选中就不是全选
            if (!items[j].checked) {
              // 一但进入判断，则证明不是全选状态
              // 将checkedAllBox设置为没选中状态
              checkedAllBox.checked = false;
              break;
            }
          }
        };
        // 4.#sendBtn
        var sendBtn = document.getElementById("sendBtn");
        sendBtn.onclick = function () {
          // 遍历items
          for (var i = 0; i < items.length; i++) {
            // 判断是否选中
            if (items[i].checked) {
              alert(items[i].value);
            }
          }
        };
        //  5.#checkedAllBox

        /**
         * 全选/全不选
         *   当它选中时，其余的也选中，当它取消时其余的也取消
         *
         * 在事件响应函数中，响应函数是给谁绑定的this就是谁
         *
         */
        var checkedAllBox = document.getElementById("checkedAllBox");
        checkedAllBox.onclick = function () {
          //   alert(this === checkedAllBox);
          //   设置多选框的选中状态
          for (var i = 0; i < items.length; i++) {
            items[i].checked = checkedAllBox.checked;
          }
        };
        // 6.items

        /**
         * 如果四个多选框都选中，则checkedAllBox也选中
         * 如果四个多选框都没选中，则checkedAllBox也不选中
         */

        for (vari = 0; i < items.length; i++) {
          items[i].onclick = function () {
            checkedAllBox.checked = true;

            for (var j = 0; j < items.length; j++) {
              // 判断四个多选框是否全选
              // 只要有一个没选中就不是全选
              if (!items[j].checked) {
                // 一但进入判断，则证明不是全选状态
                // 将checkedAllBox设置为没选中状态
                checkedAllBox.checked = false;
                break;
              }
            }
          };
        }
      };
    </script>
  </head>
  <body>
    <form action="" method="post">
      你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

      <br />
      <input type="checkbox" name="items" value="足球" />足球
      <input type="checkbox" name="items" value="篮球" />篮球
      <input type="checkbox" name="items" value="羽毛球" />羽毛球"
      <input type="checkbox" name="items" value="乒乓球" />乒乓球
      <br />
      <input type="button" id="checkedAllBtn" value="全 选" />
      <input type="button" id="checkedNoBtn" value="全不选" />
      <input type="button" id="checkedRevBtn" value="反 选" />
      <input type="button" id="sendBtn" value=" 提交" />
    </form>
  </body>
</html>
